<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .clearfix::before,
        .clearfix::after {
            content: "";
            display: block;
        }

        .clearfix::after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .view {
            width: 600px;
            height: 400px;
            /* background: red; */
            margin: 60px auto;
            position: relative;
        }

        .view ul li {
            float: left;
            width: 120px;
            height: 400px;
            position: relative;
            transform-style: preserve-3d;
            transition: all 1s;
        }

        .view ul li span {
            position: absolute;
            width: 120px;
            height: 400px;
        }
        /* 调整每张图片位置,形成上下前后的四面墙 */
        li span:nth-child(1) {
            transform: translateZ(200px);
            background: url("images/1.jpg");
        }

        li span:nth-child(2) {
            transform: translateY(-200px) rotateX(90deg);
            background: url("images/2.jpg");
        }

        li span:nth-child(3) {
            transform: translateZ(-200px) rotateX(180deg);
            background: url("images/3.jpg");
        }

        li span:nth-child(4) {
            transform: translateY(200px) rotateX(270deg);
            background: url("images/4.jpg");
        }

        li:nth-of-type(1) span {
            background-position: 0 0;
        }

        li:nth-of-type(2) span {
            background-position: -120px 0;
        }

        li:nth-of-type(3) span {
            background-position: -240px 0;
        }

        li:nth-of-type(4) span {
            background-position: -360px 0;
        }

        li:nth-of-type(5) span {
            background-position: -480px 0;
        }

        .last,
        .next {
            width: 50px;
            height: 60px;
            position: absolute;
            top: 50%;
            margin-top: -30px;
            background: rgba(0, 0, 0, .5);
            color: white;
            line-height: 60px;
            text-align: center;
            font-size: 30px;
            cursor: pointer;
        }

        .next {
            right: 0;
        }
    </style>
</head>

<body>
    <div class="view">
        <ul class="clearfix">
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
        </ul>
        <span class="last">&lt;</span>
        <span class="next">&gt;</span>
    </div>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            //点击一次.last或者.next计数器
            var count = 0;

            //设置节流阀
            var flag = true;

            // 左右箭头添加点击事件
            $(".next").on("click", function(){
                nextImg("li");
            });
            $(".last").on("click", function(){
                lastImg("li");
            });

            //设置计时器自动轮播
            var timerId = null;
            timerId = setInterval(function () {
                nextImg("li");
            }, 3000);

            //设置hover时,清除计时器停止自动轮播,离开时重设计时器
            $(".view").hover(function () {
                clearInterval(timerId);
            }, function () {
                timerId = setInterval(function () {
                    nextImg("li");
                }, 3000);
            })

            //函数向下一张轮播
            function nextImg(ele) {
                // var num = 0;
                // 只有flag为true时,此函数才有效,解决连续点击造成的bug
                if (flag) {
                    flag = false;
                    count++;
                    //遍历所有的元素
                    $(ele).each(function (index) {
                        $(this).css({
                            "transform": "rotateX(" + -90 * count + "deg)",
                            // 设置延迟,形成切割轮播效果
                            "transition-delay": (index * 0.2) + "s"
                        })
                        setTimeout(function () {
                            flag = true;
                        }, 1800);
                    })
                }
            }

            //函数向上一张轮播
            function lastImg(ele) {
                if (flag) {
                    flag = false;
                    count--;
                    //遍历所有的元素
                    $(ele).each(function (index) {
                        $(this).css({
                            "transform": "rotateX(" + -90 * count + "deg)",
                            "transition-delay": (index * 0.2) + "s"
                        })
                        setTimeout(function () {
                            flag = true;
                        }, 1800);
                    })
                }
            }
        })
    </script>
</body>

</html>